<template>
  <view class="uni-padding-wrap uni-common-mt">
    <view class="uni-title uni-common-mt">默认样式</view>
    <view>
      <checkbox-group>
        <checkbox value="cb1" checked="true">选中</checkbox>
        <checkbox value="cb">未选中</checkbox>
      </checkbox-group>
    </view>

    <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
    <view>
      <checkbox-group>
        <label style="background-color: #8A6DE9; padding: 5rpx 10rpx; border-radius: 8rpx;">
          <checkbox value="cb1" checked="true" style="transform: scale(0.7);" />选中
        </label>
        <label>
          <checkbox value="cb" style="transform: scale(0.6);" />未选中
        </label>
      </checkbox-group>
    </view>

    <view class="uni-title uni-common-mt">推荐展示样式</view>
    <view class="uni-list">
      <checkbox-group @change="checkboxChange">
        <label
          class="uni-list-cell uni-list-cell-pd"
          v-for="item in items"
          :key="item.value"
          :style="{backgroundColor: item.bgColor, padding: '10rpx', borderRadius: '5rpx', marginBottom: '5rpx'}"
        >
          <view>
            <checkbox :value="item.value" :checked="item.checked" />
          </view>
          <view>{{item.name}}</view>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '美国', value: 'usa', checked: false, bgColor: '#F3A73F' },
        { name: '中国', value: 'china', checked: true, bgColor: '#F3A73F' },
        { name: '巴西', value: 'brazil', checked: false, bgColor: '#F3A73F' },
        { name: '日本', value: 'japan', checked: false, bgColor: '#F3A73F' },
        { name: '英国', value: 'uk', checked: false, bgColor: '#F3A73F' },
        { name: '法国', value: 'france', checked: false, bgColor: '#F3A73F' },
      ]
    }
  },
  methods: {
    checkboxChange(e) {
      var items = this.items;
      var values = e.detail.value;
      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i];
        console.log('i:' + i + '---' + item.name + ', index:' + values.indexOf(item.value) + ', isCheck: ' + item.checked);
        if (values.indexOf(item.value) >= 0) {
          this.$set(item, 'checked', true);
        } else {
          this.$set(item, 'checked', false);
        }
      }
    }
  }
}
</script>

<style>

.uni-padding-wrap {
  padding: 0 15rpx; 
}

.uni-common-mt {
  margin-top: 15rpx;
}

.uni-title {
  font-size: 32rpx;
  color: #333;
  padding: 10rpx 0;
  margin-bottom: 5rpx;
}
checkbox-group {
  display: block; 
  width: 100%;
}

.uni-list {
  width: 96%;
}
.uni-list-cell {
  display: flex;
  align-items: center;
  width: 100%; 
  margin-bottom: 5rpx !important;
}

.uni-list-cell view:first-child {
  margin-right: 0 rpx; 
}

.uni-list-cell view:last-child {
  font-size: 30rpx;
  color: #fff;
  flex: 1; 
}



checkbox-group:nth-child(4) label:first-child {
  color: #fff; 
}

</style>
